import React from 'react'
import { Breadcrumb, Icon, Form, Select, Button, message} from 'antd'
import PropTypes from 'prop-types'
import {Link, withRouter} from "react-router-dom"
import API from '../../../api/Goods/goods'
const FormItem = Form.Item
const Option = Select.Option

class IcsComponentsSupplierFilterForm extends React.Component {
    state = {
        one: [],
        two: [],
        three: [],
        four: [],
        twoVal: '',
        threeVal: '',
        fourVal: '',
        cat_id: 1,
        cat_name: '服装商城',
        shop_id: null
    }
    componentDidMount () {
        if (this.props.history.location.state && this.props.history.location.state.hasOwnProperty('shop_id') ) {
            this.setState({shop_id: this.props.history.location.state.shop_id})
        }
        this.getCatList({page: 1, pageSize: 100000, store_type: 1, parent_id: 0}, 'two')
    }
    getCatList = (query, level) => {
        API.getCatList(query).then(res => {
            if (res.error === 0) {
                if (level === 'one') {
                    this.setState({one: res.data.listData})
                }
                if (level === 'two') {
                    this.setState({two: res.data.listData})

                }
                if (level === 'three') {
                    this.setState({three: res.data.listData})
                }
                if (level === 'four') {
                    this.setState({four: res.data.listData})
                }
            }
        })
    }
    changeTwo = (e, option) => {
        this.setState({twoVal: e, cat_id: e, cat_name: option.props.children})
        this.setState({threeVal: '', fourVal: '', four: []})
        this.getCatList({page: 1, pageSize: 100000, store_type: 1, parent_id: e}, 'three')
    }
    changeThree = (e, option) => {
        this.setState({threeVal: e, cat_id: e, cat_name: option.props.children})
        this.getCatList({page: 1, pageSize: 100000, store_type: 1, parent_id: e}, 'four')
    }
    changeFour = (e, option) => {
        this.setState({fourVal: e, cat_id: e, cat_name: option.props.children})
    }
    handleSearch = (e) => {
        e.preventDefault()
        this.props.form.validateFields((err, values) => {
            console.log(values)
            if (this.state.two.length && this.state.twoVal === '') {
                message.error('请选择二级分类')
                return
            }
            if (this.state.three.length && this.state.threeVal === '') {
                message.error('请选择三级分类')
                return
            }
            if (this.state.four.length && this.state.fourVal === '') {
                message.error('请选择四级分类')
                return
            }
            if (this.props.history.location.state && this.props.history.location.state.hasOwnProperty('goods_id')) {
                this.props.history.push("/goods/detail/index",{cat_id: this.state.cat_id, cat_name: this.state.cat_name, goods_id: this.props.history.location.state.goods_id, shop_id: this.state.shop_id})
            } else {
                this.props.history.push("/goods/detail/index",{cat_id: this.state.cat_id, cat_name: this.state.cat_name, shop_id: this.state.shop_id})
            }
        })
    }
    render () {
        const { getFieldDecorator } = this.props.form
        return <div style={{height: 400}}>
            <div className="common-bread">
                <Breadcrumb style={{ margin: '12px 0' }}>
                    <Breadcrumb.Item>
                        <Link to={`/dashboard`}><Icon type="home" /></Link>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>商品管理</Breadcrumb.Item>
                    <Breadcrumb.Item><Link to={`/quality/ticket`}>创建商品</Link></Breadcrumb.Item>
                </Breadcrumb>
            </div>
            <div><Form
            layout="inline"
            className="supplier-filter"
            onSubmit={this.handleSearch}
        >
            <FormItem
                label=""
                labelCol={{ span: 10 }}
                wrapperCol={{ span: 14 }}
            >
                {getFieldDecorator('one', {
                    rules: [{
                        required: true, message: '请选择归属商城!',
                    }],
                    initialValue: '1'
                })(
                    <Select style={{ width: 194 }} placeholder="请选择" onChange={this.onWarrantStatusChange}>
                        <Option value="1" key='1'>服装城</Option>
                    </Select>
                )}
            </FormItem>
            <FormItem
                label=""
                labelCol={{ span: 10 }}
                wrapperCol={{ span: 14 }}
            >
                {getFieldDecorator('two', {
                    // initialValue: '1'
                })(
                    <Select style={{ width: 194, marginRight: 15 }} placeholder="请选择" onChange={this.changeTwo}>
                        {this.state.two.map(v => <Option value={v.id} key={v.id}>{v.cat_name}</Option>)}
                    </Select>
                )}
            </FormItem>
            <FormItem
                label=""
                labelCol={{ span: 10 }}
                wrapperCol={{ span: 14 }}
            >
                {getFieldDecorator('three', {
                    // initialValue: '1'
                })(
                    <Select style={{ width: 194, marginRight: 15 }} placeholder="请选择" onChange={this.changeThree}>
                        {this.state.three.map(v => <Option value={v.id} key={v.id}>{v.cat_name}</Option>)}
                    </Select>
                )}
            </FormItem>
            <FormItem
                label=""
                labelCol={{ span: 10 }}
                wrapperCol={{ span: 14 }}
            >
                {getFieldDecorator('four', {
                    // initialValue: '1'
                })(
                    <Select style={{ width: 194, marginRight: 15 }} placeholder="请选择" onChange={this.changeFour}>
                        {this.state.four.map(v => <Option value={v.id} key={v.id}>{v.cat_name}</Option>)}
                    </Select>
                )}
            </FormItem>
            <FormItem className="filter-select" >
                <Button type="primary" htmlType="submit">下一步</Button>
            </FormItem>
        </Form></div>
        </div>
    }
}

IcsComponentsSupplierFilterForm.propTypes = {
    getFieldDecorator: PropTypes.func,
    doSearch: PropTypes.func,
    form: PropTypes.object
}

const IcsComponentsSupplierFilter = Form.create()(IcsComponentsSupplierFilterForm)

export default withRouter(IcsComponentsSupplierFilter)
